#mainNavbar {
	font-size: 1.5rem;
	font-weight: 100;
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
	opacity: 0.8;
}

title {
	font-family: 'Roboto', sans-serif;
}

.navbar-toggler {
	width: 47px;
	height: 34px;
}

.navbar-toggler .line {
	width: 100%;
	float: left;
	height: 2px;
	background-color: #fff;
	margin-bottom: 5px;
}

/* html {
	margin-right: 0;
} */

#headingGroup {
	text-align: center;
                /* margin: 200px 50px 75px 5px; */
	margin: 200px 0 0 0;
	/*animation: nudge 7s ease-out alternate;*/
                /* animation: stretch 2s ease-out 0.5s alternate none running; */;
}

img#close {
	position: absolute;
	right: -14px;
	top: -14px;
	cursor: pointer;
}

#aboutSection {
	width: 100%;
	height: 100%;
	opacity: 0.95;
	top: 0;
	left: 0;
	display: none;
	position: fixed;
                /* background-color: #313131; */
	overflow: auto;
}

#pId {
	background-color: #FEFFED;
	padding: 20px 35px;
	margin: -57px -51px -10px;
	text-align: center;
	border-radius: 10px 10px 0 0;
}

#secondSection {
	position: absolute;
	left: 50%;
	top: 17%;
	margin-left: 50px;
	font-family: 'Raleway', sans-serif;
}

#form1 {
	display: block;
	background-color: white;
	padding: 50px;
	border-radius: 50px 50px;
}

body {
	line-height: 1.7;
	color: white;
	font-weight: 400;
	font-size: 1rem;
                /* background: #606c88;
    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
    background: linear-gradient(to right, #3f4c6b, #606c88); */
	/* background-size: cover; */
}

hr {
	background: white;
	width: 50%;
}

#work {
	color: pink;
}

#edu {
	color: pink;
}

.me {
	background: goldenrod center center / cover no-repeat fixed;
                /* background: #0b0424 center center / cover no-repeat fixed; */
                /* background: url('me.jpg') center center / cover no-repeat fixed; */
	height: 800px;
	height: 100vh;
                /* You must set a specified height */
	opacity: 0.9;
	z-index: 6;
}

@keyframes pulse {
	0%,
                100% {
		background-color: #0b0424;
	}

	50% {
		background-color: #0b0424;
	}
}

@keyframes nudge {
                /* 0%,
        100% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(150px, 0);
        }
        80% {
            transform: translate(-150px, 0);
        } */
                /* from {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(0.75);
            opacity: 0.25;
        }
        to {
            transform: scale(1);
            opacity: 1;
        } */
	0% {
		transform: translate(120%) skewX(-30deg);
	}

	70% {
		transform: translate(0%) skewX(-30deg);
	}

	80% {
		transform: translate(0%) skewX(20deg);
	}

	95% {
		transform: translate(5%) skewX(-10deg);
	}

	100% {
		transform: translate(0%) skewX(0deg);
	}
}

#secondHr {
	background: pink;
	width: 50%;
	height: 0.6px;
}

#thirdHr {
	background: pink;
	width: 50%;
	height: 0.6px;
}

.navbar-nav {
	margin-right: 0;
	padding: 0;
}

.firstSection {
	/* margin-right: 0; */
	/* padding: 0; */
	/* width: auto; */
	margin: auto;
}

h1 {
	color: white;
}

h2 {
	color: white;
}

html {
	margin-right: 0;
}

.col-4 h2 {
	color: #3A1C71;
}

.col p {
	text-align: center;
	color: white;
}

.progress_bar {
	position: relative;
}

.progress_bar .progress_bar_title {
	color: #4CC1D3;
	font-size: 16px;
	line-height: 22px;
	font-weight: normal;
	text-transform: uppercase;
}

.progress_bar .progress_number {
	color: hsl(188, 61%, 56%);
	font-size: 20px;
	line-height: 22px;
	font-weight: normal;
	position: absolute;
	top: 0;
	right: 0;
}

.progress_bar .pro-bar {
	background: hsl(210, 8%, 10%);
	margin: 5px 0 20px 0;
}

.progress_bar .progress-bar-inner {
	height: 1.5px;
}

.progress_bar.orange .progress_number {
	color: #e67e22;
}

.progress_bar.pink .progress_number {
	color: #ed687c;
}

#mainNavbar .nav-link {
	color: #000000;
	font-family: 'Lobster', cursive;
}

#meLink {
	font-family: 'Lobster', cursive;
	font-weight: inherit;
}

#meLink:hover {
	font-weight: bold;
}

#headingGroup h2:hover,
            h1:hover {
	font-family: 'Lobster', cursive;
	color: black;
}

#mainNavbar .nav-link:hover {
	font-weight: bold;
	text-decoration: underline;
	color: white;
}

#mainNavbar .navbar-brand {
	color: white;
	font-size: 1.5rem;
}

img {
	width: 100%;
}
            /* For pop up */
            
.aboutme_modal,
            .skills_modal,
            .experiance_modal,
            .education_modal,
            .contact_modal {
	display: none;
                /* Hidden by default */
	position: fixed;
                /* Stay in place */
	z-index: 1;
                /* Sit on top */
	padding-top: 100px;
                /* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
                /* Full width */
	height: 100%;
                /* Full height */
	overflow: auto;
                /* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
                /* Fallback color */
	background-color: rgba(0, 0, 0, 0.9);
                /* Black w/ opacity */;
}
            /* Modal Content */
            
.aboutme-modal-content,
            .skills-modal-content,
            .experiance-modal-content,
            .education-modal-content,
            .contact-modal-content {
	background-color: #0c2026;
	margin: auto;
	padding: 20px;
	border: 0px solid #888;
	width: auto;
	border-radius: 25px;
}

.aboutme-modal-content h4,
            .skills-modal-content h4,
            .experiance-modal-content h4,
            .education-modal-content h4,
            .contact-modal-content h4 {
	color: #FF8C00;
	margin: auto;
	padding-bottom: 5px;
}
            /* The Close Button */
            
.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	size: 1px;
}

.close:hover,
            .close:focus {
	color: white;
	text-decoration: none;
	cursor: pointer;
}

@media screen and (max-width: 1060px) {
	#primary {
		width: 67%;
	}

	#secondary {
		width: 30%;
		margin-left: 3%;
	}
}
            /* Media Queries: Tabled Portrait */
            
@media screen and (max-width: 768px) {
	#primary {
		width: 100%;
	}

	#secondary {
		width: 100%;
		margin: 0;
		border: none;
	}
}

@media (min-device-width:600px) {
	img[data-src-600px] {
		content: attr(data-src-600px, url);
	}
}

@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

.centerContent {
	text-align: center;
}

.paddingForTech {
	margin: 40px;
}

.uppercase {
	text-transform: uppercase;
}

.contact_modal a {
	text-decoration: none;
	color: white;
}

.center {
	text-align: center;
}